<template>
    <div id="app">
        <div class="header">
            <mt-header fixed title="黑马程序员"></mt-header>
        </div>
        <div class="banner">
            <mt-swipe :auto="4000" class="mui-banner">
                <mt-swipe-item><img src="../assets/1.jpeg" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../assets/2.jpeg" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../assets/3.jpeg" alt=""></mt-swipe-item>                                   
            </mt-swipe>

        </div>
        <div>
            <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">Home</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
		                    <div class="mui-media-body">Email</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">Chat</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">location</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">Search</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">Phone</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">Setting</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-info"></span>
		                    <div class="mui-media-body">about</div></a></li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-more"></span>
		                    <div class="mui-media-body">more</div></a></li>
		        </ul> 
		</div>
        </div>
        
        <div class="nav">
            <nav class="mui-bar mui-bar-tab">
			    <a class="mui-tab-item mui-active" href="#tabbar">
				    <span class="mui-icon mui-icon-home"></span>
				    <span class="mui-tab-label">首页</span>
			    </a>
			    <a class="mui-tab-item" href="#tabbar-with-chat">
				    <span class="mui-icon mui-icon-email">
                    <!-- <span class="mui-badge"></span> -->
                        </span>
				    <span class="mui-tab-label">消息</span>
			    </a>
			    <a class="mui-tab-item" href="#tabbar-with-contact">
				    <span class="mui-icon mui-icon-contact"></span>
				    <span class="mui-tab-label">通讯录</span>
			    </a>
			    <a class="mui-tab-item" href="#tabbar-with-map">
				    <span class="mui-icon mui-icon-gear"></span>
				    <span class="mui-tab-label">设置</span>
			    </a>
		    </nav>
        </div>
    </div>
</template>
           
<script>
export default {};
</script>
<style scoped>
.header{
    margin-top: 40px;
}
.mui-banner{
    width: 100%;
    height: 200px;
}


</style>